<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
    <style>
        /* #box{
            width: 400px;
            height: 200px;
            border: 1px #00ff00 solid;
        } */
        #box_top{
            background-color: rgb(216, 168, 112);
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            /* margin: 5px; */
        }
        #box_center{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <h1>本站公告</h1>
    <span id="sp1">中秋节快乐放假通知！</span>
    <button id="bt1">删除</button>
    <div id="box">
        <div id="box_top">
            <span style="margin: 10px;">删除提示</span>
            <img src="img测试-1/images/del.png" style="float: right;margin: 10px; line-height: 50px;">
        </div>
        <div id="box_center">
            <img src="img测试-1/images/warning.png" >
            你确定删除这条记录吗？
        </div>
        <div style="text-align: center;">
            <button id="sp2">确定</button>
            <button>取消</button>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $("#sp1").css({"color":"red","font-size":"25px"})
            // $("bt1").click(function(){
                $("#sp2").click(function(){
                    // confirm("你确定删除这条记录吗？")
                    // alert("你好")
                    $("#bt1").remove()
                    $("#sp1").remove()
                    $("#box").remove()
                })

            // })
            
            $("#box").css({"border":"1px #ff0000 solid","width":"400px","heigth":"200px" })
        })
    </script>
</body>
</html>